<template>
  <div class="filter-item">
    <div class="title">{{ title }}</div>
    <ul class="content">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "filterItem",
  props: {
    title: {
      type: String
    },
    defaultActive: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array
    }
  }
};
</script>

<style scoped lang="stylus">
.filter-item{
  background #ffffff;
  padding 21px 25px;
  margin-bottom 14px
  .title{
    padding-bottom 21px
    font-size:24px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color #666666
  }
  ul{
    flex_content();
    flex-wrap wrap;
    li{
      width 128px;
      text-align center
      background #E6E6E6
      margin-right 27px
      padding 8px 0
      margin-top 17px
      border-radius:8px;
      color #666666
    }
    .active{
      background color-primary
      color white
    }
    li:nth-child(3n) {
      margin-right 0
    }
  }
}
</style>
